import React, { useState, useRef, useEffect } from 'react';
import { Button, Select, Checkbox, Input, Popover } from 'antd'
import { CloseCircleOutlined } from '@ant-design/icons'
import SkuCreator from "./components/SkuCreator";
import UploadBlock from '@/components/FormCondition/Upload/Img';
import aliOssUpload from '@/utils/aliOssUpload';
const Sku = (props) => {
  const { propsRef, setData, form, goodsSkuList = [], goodsPropertyList = [] } = props
  useEffect(() => {
    setList(goodsPropertyList)
  }, [])
  const [list, setList] = useState([])
  useEffect(() => {
    setData(list)
  }, [list])
  const SelectList = [
    { label: '颜色', value: '颜色', disabled: true },
    { label: '尺码', value: '尺码' },
    { label: '种类', value: '种类' },
    { label: '规格', value: '规格' },
    { label: '款式', value: '款式' },
    { label: '产地', value: '产地' },
    { label: '学科', value: '学科' }
  ]
  const selectOption = () => {
    return SelectList.map(item => {
      return {
        ...item,
        disabled: list.reduce((o, val) => {
          if (o) {
            return o
          }
          else {
            if (val.name === item.value) {
              return true
            }
            else {
              return false
            }
          }
        }, false)
      }
    })
  }
  const onChangeChecked = (checkedValues, index) => {
    onChangeLabel({
      type: 'edit',
      value: { showImage: checkedValues },
      index
    })
  };
  const onChangeLabel = ({ index, type = 'edit', value = {} }) => {
    if (type === 'remove') {
      setList(list.filter((item, o) => {
        return o !== index
      }))
    } else if (type === 'add') {
      setList([...list, {}])
    } else {
      setList(list.map((item, key) => {
        if (key === index) {
          return {
            ...item,
            ...value
          }
        }
        else {
          return item
        }
      }))
    }
  }
  const onChangeLabelValue = ({ type = 'edit', value = {}, fatherIndex, index }) => {
    if (type === 'add') {
      setList(list.map((item, o) => {
        const { valueList = [] } = item
        return {
          ...item,
          valueList: fatherIndex === o ? [...valueList, {}] : valueList
        }
      }))
    }
    else if (type === 'remove') {
      setList(list.map((item, o) => {
        const { valueList = [] } = item
        return {
          ...item,
          valueList: fatherIndex === o ? valueList.filter((item, s) => {
            return s !== index
          }) : valueList
        }
      }))
    }
    else {
      setList(list.map((item, o) => {
        const { valueList = [] } = item
        return {
          ...item,
          valueList: fatherIndex === o ? valueList.map((item, s) => {
            if (s === index) {
              return {
                ...item,
                ...value
              }
            } else {
              return item
            }
          }) : valueList
        }
      }))
    }
  }
  const options = [
    {
      label: '添加规格图片',
      value: 'add',
    },

  ];
  const convertData = (inputData = []) => {
    let outputData = [];
    function generateCombinations(currentIndex, currentProperties) {
      if (currentIndex === inputData.length) {
        outputData.push({ properties: currentProperties });
        return;
      }

      let currentName = inputData[currentIndex].name;
      const { valueList = [] } = inputData[currentIndex]
      for (let i = 0; i < valueList.length; i++) {
        let currentValue = valueList[i].value;
        let updatedProperties = [...currentProperties, { name: currentName, value: currentValue }];
        generateCombinations(currentIndex + 1, updatedProperties);
      }
    }

    generateCombinations(0, []);

    return outputData;
  }
  return (
    <div className='commodity-manage-part'>
      <div className='commodity-part-title'>
        <div className='commodity-title-line'></div>
        <div className='commodity-part-title-word'>价格库存</div>
      </div>
      <div className='commodity_sku'>
        <div className='resource-section'>
          <div className='section-label'> 商品规格：</div>
          <div className='section-content'>
            {
              list.map((item, index) => {
                const { name, showImage = [], image, valueList = [] } = item
                return <div key={index} className='sku-container'>
                  <div className='sku'>
                    <div onClick={(e) => {
                      e.stopPropagation();
                      onChangeLabel({
                        type: 'remove', index: index,
                      })
                    }} className='sku-remove'><CloseCircleOutlined></CloseCircleOutlined></div>
                    <div className='sku-key'>
                      <label className='sku-name'>
                        规格名：</label>
                      <div className='sku-input'>
                        <Select
                          value={name}
                          style={{
                            width: 120,
                          }}
                          onChange={(e) => {
                            onChangeLabel({
                              type: 'edit', index: index, value: {
                                name: e
                              }
                            })
                          }}
                          options={selectOption()}
                        />
                      </div>
                      <div className='sku-add-img'>
                        <Checkbox.Group
                          options={options}
                          value={showImage}
                          onChange={(e) => {
                            onChangeChecked(e, index)
                          }}
                        />
                      </div>
                    </div>
                    {showImage.includes('add') && <div className='sku-value'>
                      <label className='value'>封面：</label>
                      <div className='input-wrapper'>
                        <UploadBlock initialvalues={item} name={'image'} onRemove={(e) => {
                          onChangeLabel({ type: 'edit', value: { image: '', }, index: index })
                        }} onChange={async (e) => {
                          let image = await aliOssUpload(e);
                          onChangeLabel({ type: 'edit', value: { image: image.toString(), }, index: index })

                        }} maxFile={1}></UploadBlock>
                      </div>
                    </div>
                    }
                    <div className='sku-value'>
                      <label className='value'>规格值：</label>
                      <div className='input-wrapper'>
                        <div className='input-list'>
                          {valueList.map((o, s) => {
                            const { value, image } = o
                            return <div key={s} className='sku-value-item'> <div className='sku-name-input'>
                              {/* <Popover placement="bottom" content={<ImagePower image={image}></ImagePower>} open={showImage.includes('add')}> */}
                              <Input onChange={e => {
                                onChangeLabelValue({ fatherIndex: index, index: s, type: 'edit', value: { value: e.target.value } })
                              }} value={value} className='sku-value-input'></Input>
                              {/* </Popover> */}
                              <div className='deleteskuitem'>
                                <CloseCircleOutlined onClick={(e) => {
                                  e.stopPropagation();
                                  onChangeLabelValue({ fatherIndex: index, index: s, type: 'remove' })
                                }} ></CloseCircleOutlined>
                              </div>
                            </div>
                            </div>
                          })}
                          <div onClick={() => { onChangeLabelValue({ fatherIndex: index, type: 'add' }) }} className='addSkuValue'>添加规格值</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              })
            }
            <div><Button onClick={() => {
              onChangeLabel({ type: 'add' })
            }}>添加规格商品</Button></div>
            <div className='sku-tips'>如有颜色、尺码等多种规格，请添加商品规格</div>
          </div>
        </div>

      </div>
      <SkuCreator goodsSkuList={goodsSkuList} fatherForm={form} propertyList={list} ref={propsRef}
        skus={
          convertData(list.filter(item => {
            return item.valueList && item.valueList.length > 0
          }))
        }></SkuCreator>
    </div >
  );
}
export default Sku
